<template>
  <common-list-tabs>
    <common-tabs
      slot="tabs"
      v-model="page"
      @tab-click="tabChange"
      v-if="isShow"
    >
      <el-tab-pane
        label="http协议"
        name="common-http"
        v-if="tabPermission.tabHttp"
      ></el-tab-pane>
      <el-tab-pane
        label="https协议"
        name="common-https"
        v-if="tabPermission.tabHttps"
      ></el-tab-pane>
      <el-tab-pane
        label="sftp协议"
        name="common-sftp"
        v-if="tabPermission.tabSftp"
      ></el-tab-pane>
    </common-tabs>
    <component
      slot="content"
      :is="page"
      :key="page"
      @change="change"
      :params="params"
      @changeTitle="changeTitle"
    ></component>
  </common-list-tabs>
</template>

<script>
import CommonHttp from "./http";
import CommonHttps from "./https";
import CommonSftp from "./sftp";
import { mapGetters } from "vuex";
import { getHasPermission } from "@/utils/util";

export default {
  name: "index",
  data() {
    return {
      page: "",
      params: {},
      tabPermission: {
        tabHttp: false,
        tabHttps: false,
        tabSftp: false
      },
      isShow: true
    };
  },
  components: {
    CommonHttp,
    CommonHttps,
    CommonSftp
  },
  computed: {
    ...mapGetters(["systemInfo"])
  },
  mounted() {
    this.tabPermission.tabHttp = this.systemInfo.isThird
      ? true
      : getHasPermission(["apisecurity:apiinterface:http"]);
    this.tabPermission.tabHttps = this.systemInfo.isThird
      ? true
      : getHasPermission(["apisecurity:apiinterface:https"]);
    this.tabPermission.tabSftp = this.systemInfo.isThird
      ? true
      : getHasPermission(["apisecurity:apiinterface:sftp"]);

    if (this.tabPermission.tabHttp) {
      this.page = "common-http";
    } else if (this.tabPermission.tabHttps) {
      this.page = "common-https";
    } else if (this.tabPermission.tabSftp) {
      this.page = "common-sftp";
    } else {
      this.$GlobalErrorConfirm("警告", "暂无权限,请联系管理员");
      this.$router.push("/");
    }
  },
  methods: {
    change(to, params) {
      this.params = params;
      this.page = `common-${to}`;
    },

    tabChange() {
      this.params = {};
    },

    changeTitle(isShow) {
      this.isShow = isShow;
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .tabs-content {
  padding: 0 !important;
}
</style>
